<template>
	<view>
		<cu-custom bgColor="bg-grey light" :isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">不及格成绩</view>
		</cu-custom>

		<loginModal :showLoginModal.sync="isLoginModalShow" @changes="loginModalConfirm"></loginModal>

		<view :class="'cu-modal ' + (alert == 'show' ? 'show' : '')">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示信息</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="">
					<view class="margin-bottom text-center padding text-center text-df">
						<text>暂无不及格成绩,请继续保持！</text>
					</view>
				</view>
			</view>
		</view>

		<view :class="'load-progress ' + (loadProgress != 0 ? 'show' : 'hide')" :style="'top:' + CustomBar + 'px;'">
			<view class="load-progress-bar bg-blue"
				:style="'transform: translate3d(-' + (100 - loadProgress) + '%, 0px, 0px);'"></view>
		</view>

		<scroll-view scroll-x class="bg-white nav text-center">
			<view :class="'cu-item  ' + (index == TabCur ? 'text-blue cur' : '')" @tap="tabSelect" :data-id="index"
				v-for="(item, index) in cate" :key="item.key">
				{{ item }}
			</view>
		</scroll-view>

		<view class="flex">
			<view class="flex-sub bg-grey light solid-right text-df text-white padding" style="width: 16rpx">
				<text>序号</text>
			</view>
			<view class="text-df bg-grey light padding grid col-4 text-center solid-left" style="color: black; flex: 9">
				<view>名字</view>
				<view @tap="sortByGap">
					绩点
					<text
						:class="' margin-left-sm cuIcon-' + (sortGap == 1 ? 'move' : [sortGap == 2 ? 'unfold' : 'fold'])"></text>
				</view>
				<view>类型</view>
				<view @tap="sortByScore">
					分数
					<text
						:class="' margin-left-sm cuIcon-' + (sortScore == 1 ? 'move' : [sortScore == 2 ? 'unfold' : 'fold'])"></text>
				</view>
			</view>
		</view>

		<view wx-for-index="index" class="flex solid-bottom" v-for="(item, index) in chengjiArrTemp" :key="item.key">
			<view class="flex-sub bg-white light solid-right solid-bottom text-df text-black padding"
				style="width: 16rpx">
				<text>{{ index + 1 }}</text>
			</view>

			<view class="text-sm text-grey bg-white light padding grid col-4 text-center solid-bottom" style="flex: 9">
				<view>{{ item[0] }}</view>
				<view>{{ item[1] }}</view>
				<view>{{ item[2] }}</view>
				<view>{{ item[3] }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/bujige/index.js
	const app = getApp();
	import {
		getBuJiGe
	} from '../../utils/getBuJiGe.js'
	import loginModal from '@/pages/login-modal/index'
	export default {
		components: {
			loginModal,
		},
		data() {
			return {
				CustomBar: app.globalData.CustomBar,
				loadProgress: 0,
				changjiArrAll: '',
				chengjiArrTemp: '',
				termIndex: 0,
				loadProgress: 0,
				isLoad: false,
				sortGap: true,
				sortScore: true,
				cate: ['尚不及格', '曾不及格'],
				TabCur: 0,
				alert: '',
				isLoginModalShow: false,
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			let that = this;
			uni.getStorage({
				key: 'userID',
				fail() {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				},
				success() {
					that.getChengJi();
				}
			});
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			tabSelect(e) {
				this.setData({
					TabCur: e.currentTarget.dataset.id,
					chengjiArrTemp: this.chengjiArrAll[e.currentTarget.dataset.id]
				});
			},

			loadProgressFun() {
				this.setData({
					loadProgress: this.loadProgress + 3
				});

				if (this.loadProgress < 100) {
					setTimeout(() => {
						this.loadProgressFun();
					}, 100);
				} else {
					this.setData({
						loadProgress: 0
					});
				}
			},

			showLoginModal() {
				this.setData({
					isLoginModalShow: true
				});
			},

			loginModalConfirm(e) {
				this.getChengJi()
			},


			async getChengJi() {
				uni.showLoading({
					title: '获取成绩'
				});
				this.loadProgressFun();
				this.setData({
					isLoad: true
				});
				let that = this;

				let res = await getBuJiGe()
				console.log(res)
				uni.hideLoading()
				if (res == null) {
					that.showLoginModal();
					that.setData({
						isLoad: false
					});
					return
				}


				uni.showToast({
					title: '获取成功'
				});

				that.setData({
					isLoad: false,
					loadProgress: 100,
					chengjiArrAll: res.resultArr,
					sortGap: 1,
					sortScore: 1
				});

				if (that.TabCur == 0) {
					that.setData({
						chengjiArrTemp: res.resultArr[0]
					});
				}

				if (res.resultArr[0].length == 0 && res.resultArr[1].length == 0) {
					that.setData({
						alert: 'show'
					});
				}
			},

			sortByGap() {
				this.setData({
					sortScore: 1
				});

				if (this.sortGap == 1) {
					this.setData({
						//降序
						sortGap: 2,
						chengjiArrTemp: this.chengjiArrTemp.sort(function(x, y) {
							return y[1] - x[1];
						})
					});
				} else if (this.sortGap == 2) {
					this.setData({
						//升序
						sortGap: 3,
						chengjiArrTemp: this.chengjiArrTemp.sort(function(x, y) {
							return x[1] - y[1];
						})
					});
				} else {
					this.setData({
						sortGap: 2,
						//降序
						chengjiArrTemp: this.chengjiArrTemp.sort(function(x, y) {
							return y[1] - x[1];
						})
					});
				}
			},

			sortByScore() {
				this.setData({
					sortGap: 1
				});

				if (this.sortScore == 1) {
					this.setData({
						//降序
						sortScore: 2,
						chengjiArrTemp: this.chengjiArrTemp.sort(function(x, y) {
							return y[3] - x[3];
						})
					});
				} else if (this.sortScore == 2) {
					this.setData({
						//升序
						sortScore: 3,
						chengjiArrTemp: this.chengjiArrTemp.sort(function(x, y) {
							return x[3] - y[3];
						})
					});
				} else {
					this.setData({
						sortScore: 2,
						//降序
						chengjiArrTemp: this.chengjiArrTemp.sort(function(x, y) {
							return y[3] - x[3];
						})
					});
				}
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
